<script setup lang="ts">
    import {ElRow, ElCol, ElCard} from 'element-plus'
    import { useI18n } from '@/hooks/web/useI18n'
    import Table from '@/views/Shouye/components/Table.vue'
    import { reactive} from 'vue'
    import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
    import { getTableListRegister } from '@/api/denglu/index.ts';
    import { TableDataRegister } from '@/api/denglu/types.ts'
    import { useTable } from '@/views/Shouye/components/useTable.ts'

    const { register, tableObject, methods } = useTable<TableDataRegister>({
        getListApi: getTableListRegister,
        response: {
            list: 'list',
            total: 'total'
        },
        defaultParams:{
            mid:1,
        },
    })

    const { getList } = methods
    getList()

    const { t } = useI18n()

    const crudSchemas = reactive<CrudSchema[]>([
        {
            field: 'login_date',
            label: "登录时间",
            sortable: true,
            type: 'register_time'
        },
        {
            field: 'login_ip',
            label: "登录IP",
            type: 'register_ip'
        },
        {
            field: 'login_location',
            label: "登录地区",
            type: 'register_area'
        },
    ])
    const { allSchemas } = useCrudSchemas(crudSchemas)
</script>

<template>
    <ElCol :span="24">
        <ElCard shadow="hover" class="center-box">
            <template #header>
                <div class="card-header">
                    <span>登录日志</span>
                    <!--<div class="yang-box"><el-button type="success"><Icon icon="system-uicons:reset"/>刷新</el-button></div>-->
                </div>
            </template>
            <Table
                v-model:pageSize="tableObject.pageSize"
                v-model:currentPage="tableObject.currentPage"
                :columns="allSchemas.tableColumns"
                :data="tableObject.tableList.slice((tableObject.currentPage - 1) * tableObject.pageSize,tableObject.currentPage * tableObject.pageSize)"
                :loading="tableObject.loading"
                :show-checkbox="false"
                :pagination="{total: tableObject.total}"
                @register="register">
            </Table>
        </ElCard>
    </ElCol>
</template>
<style lang="less" scoped>
    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .center-box{
        margin-bottom: 20px;
    }
</style>
<style lang="less" scoped>
    /* 它本身边框的颜色 */
    .el-card__header{
        background-color: #F3F3F3;
        border-color: #C0C0C0;
    }
    /* 图标样式
    .el-icon svg{
        margin: 0px 15px -2px 0px;
    }*/
</style>


